<template>

    <div id="chart-panel" style="height: 500px; width: 1000px;  margin: 0 auto;"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'ChartComponent',
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        var dom = document.getElementById('chart-panel');
        var myChart = echarts.init(dom);
        var option = {
          backgroundColor: '#05224d',
          title: {
            text: '单位：(万元)',
            textStyle: {
              color: 'rgba(131, 162, 192, 1)',
              fontSize: 12,
            },
            top: '4%',
            left: '2%',
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['水费', '电费'],
            icon: 'rich',
            show: true,
            itemWidth: 14,
            itemHeight: 14,
            textStyle: {
              color: '#C6D1DB',
              fontSize: '14px',
            },
            top: 8,
            right: 10,
            itemGap: 34,
          },
          grid: {
            left: '4%',
            right: '4%',
            bottom: '10%',
            top: '16%',
            containLabel: true,
          },
          xAxis: {
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            type: 'category',
            boundaryGap: false,
            axisLine: {
              symbol: 'none',
              lineStyle: {
                color: '#B4C0CC',
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: 'rgba(255, 255, 255, 0.3)',
              fontSize: 12,
              padding: [10, 0, 0, 0],
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#B4C0CC',
              fontSize: 12,
              padding: [0, 10, 0, 0],
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.12)',
                type: 'dashed',
              },
            },
          },
          series: [
            {
              name: '水费',
              type: 'line',
              data: [10, 20, 30, 40, 10, 20, 30, 40, 10, 20, 30, 40],
              smooth: true,
              color: 'rgba(12, 245, 229, 1)',
              lineStyle: {
                width: 2,
              },
              showSymbol: false,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(12, 245, 229, 0.15)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(12, 245, 229, 0)',
                    },
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10,
              },
              symbol: 'circle',
              symbolSize: 6,
            },
            {
              name: '电费',
              data: [5, 10, 20, 30, 5, 10, 20, 30, 5, 10, 20, 30],
              type: 'line',
              smooth: true,
              color: '#FFEB3B',
              lineStyle: {
                width: 2,
              },
              showSymbol: false,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(255, 235, 59, 0.15)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(255, 235, 59, 0)',
                    },
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10,
              },
              symbol: 'circle',
              symbolSize: 6,
            },
          ],
        };
        myChart.setOption(option);
      },
    },
  };
  </script>
  
  <style scoped>
html,
body,
#chart-panel {
  height: 100%;
  width: 100%;
}
</style>
  